<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:58:42
 -->
<template>
  <div class="app-container">
    <Tab
      v-model="searchData.tab"
      @on-date-change="onDateChange"
      @on-click="onTabClick"
    >
      <div class="fr" />
    </Tab>
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <div class="border-gay bg-gay clearfix">
          <el-row class="report-statistics">
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>销售笔数</span><br>
                <i v-if="isShowLoading(saleInfo.billCount)" class="el-icon-loading" />
                <b v-if="!isShowLoading(saleInfo.billCount)">{{ saleInfo.billCount || 0 }}</b>
              </p>
            </el-col>
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>销售额</span><br>
                <i v-if="isShowLoading(saleInfo.amountPayable)" class="el-icon-loading" />
                <b v-if="!isShowLoading(saleInfo.amountPayable)" class="color-red">{{ saleInfo.amountPayable|| 0 }}</b>
              </p>
            </el-col>
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>销售毛利</span><br>
                <i v-if="isShowLoading(saleInfo.grossProfit)" class="el-icon-loading" />
                <b v-if="!isShowLoading(saleInfo.grossProfit)" class="color-red">{{ saleInfo.grossProfit || 0 }}</b>
              </p>
            </el-col>
            <el-col :span="4" class="border-l-gay">
              <p>
                <span>毛利率</span><br>
                <i v-if="isShowLoading(saleInfo.grossProfitPer)" class="el-icon-loading" />
                <b v-if="!isShowLoading(saleInfo.grossProfitPer)" class="color-red">{{ saleInfo.grossProfitPer || 0 }}</b>
              </p>
            </el-col>
            <el-col :span="8" style="text-align: left">
              <p style="padding-left:20px;">
                <span>销售额最高的商品：
                  <span>{{ saleInfo.goodName | name }}</span>
                </span><br>
                <span>购买额最高的客户：
                  <span>{{ saleInfo.comegoName | name }}</span>
                </span><br>
              </p>
            </el-col>
          </el-row>
        </div>
        <component
          :is="currentComp"
          v-if="isShowReport"
          ref="reportTable"
          :sale-info="saleInfo"
          :filter-data="searchData"
        >
          <el-radio-group v-model="dataObj.saleShowBy" @change="onSaleShowByChange">
            <el-radio :label="1">按商品</el-radio>
            <el-radio :label="2">按客户</el-radio>
            <el-radio :label="3">按单据</el-radio>
          </el-radio-group>
        </component>
      </el-card>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getSaleInfo } from '@/api/report/sale.js'
import Affix from '@/components/Affix'
import Tab from '@/views/components/Tab'
import ReportByGoods from './report-by-goods'
import ReportByBill from './report-by-bill'
import ReportByComego from './report-by-comego'

export default {
  name: 'ReportSale',
  filters: {
    'name': function(val) {
      if (!val) return '无'
      return val
    }
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, Tab, ReportByGoods, ReportByBill, ReportByComego },
  mixins: [oftenuse],
  data() {
    return {
      isShowReport: false,
      searchData: { tab: 1, toreId: '-1' },
      saleInfo: { },
      saleInfoLoading: false,
      stockInfo: {
        oper: 'add',
        data: {}
      },
      currentComp: 'ReportByGoods',
      dialogVisible: false,
      optionsData: {}
    }
  },
  watch: {
    'searchData': {
      handler(data) {
        this.getSaleInfo(data)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnExport() {
    },
    // api
    initData() {
      this.$set(this.dataObj, 'saleShowBy', 1)
    },
    getSaleInfo(searchData) {
      this.saleInfoLoading = true
      this.isShowReport = false
      const params = searchData || {}
      getSaleInfo(params).then(res => {
        this.isShowReport = true
        this.saleInfoLoading = false
        if (res.data.flag) {
          const data = res.data.data
          const { amountPayable, priceCostTotal } = data
          // 毛利
          const grossProfit = this.$amount(amountPayable).subtract(priceCostTotal).format()
          let grossProfitInt = '0.00'
          if (amountPayable !== 0) {
            grossProfitInt = Math.round(grossProfit * 10000 / amountPayable) / 100
          }
          const grossProfitPer = `${grossProfitInt}%`
          data.grossProfit = grossProfit
          data.grossProfitPer = grossProfitPer
          this.saleInfo = data
        }
      })
    },
    isShowLoading(val) {
      return this.saleInfoLoading
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
    },
    onDateChange(data) {
      this.$set(this.searchData, 'beginTime', data.beginTime)
      this.$set(this.searchData, 'endTime', data.endTime)
    },
    onTabClick(val) {
    },
    onSaleShowByChange(val) {
      const comp = {
        1: 'ReportByGoods',
        2: 'ReportByComego',
        3: 'ReportByBill'
      }
      this.currentComp = comp[val]
    }
  }
}
</script>
<style scoped>
</style>
